<template>
	<view>
	<up-tabbar
		:value="current"
		@change="onchange"
		:fixed="true"
		:placeholder="true"
		:safeAreaInsetBottom="true" 
	>
		<up-tabbar-item text="首页" name="home"  @click="onclick" >
			<template #active-icon>
				<image  class="tabicon" src="/static/icon/sy-icon2.png"></image>
			</template>
			<template #inactive-icon>
				<image   class="tabicon" src="/static/icon/sy-icon.png"></image>
			</template>
			
		</up-tabbar-item>
		 <up-tabbar-item text="预订" name="mall"  @click="onclick" >
			 <template #active-icon>
			 	<image  class="tabicon" src="/static/icon/mp-icon2.png"></image>
			 </template>
			 <template #inactive-icon>
			 	<image   class="tabicon" src="/static/icon/mp-icon.png"></image>
			 </template>
		 </up-tabbar-item>
		<up-tabbar-item text="订单" name="order"  @click="onclick" >
			<template #active-icon>
				<image  class="tabicon" src="/static/icon/dd-icon2.png"></image>
			</template>
			<template #inactive-icon>
				<image   class="tabicon" src="/static/icon/dd-icon.png"></image>
			</template>
		</up-tabbar-item>
		<up-tabbar-item text="我的" name="user"  @click="onclick" >
			<template #active-icon>
				<image  class="tabicon" src="/static/icon/wd-icon2.png"></image>
			</template>
			<template #inactive-icon>
				<image   class="tabicon" src="/static/icon/wd-icon.png"></image>
			</template>
		</up-tabbar-item>
	</up-tabbar>	
	
	
</view> 
</template>

<script>
	/**
	 * 通过全局store 的属性 setPageBarName 
	 * 改变 pageBarName的值，
	 * 实现所有组件都能监听到 tab的变化
	 * 可以在深层页面返回 都index 的某个tab，
	 * 用store的actions方法 switchTab
	 */
	export default {
		name:"kb-page-bar",
		emits: [ 'update:changeItem'], 
		props:{
			//属性供外部设置当前的选中tab的name
			current:{
				type : String,
				value: 'home',
				
			}
		},
		data() {
			return {
				showbind: undefined, 
			};
		},
		watch:{
			current:{
				immediate: true,
				handler (newValue, oldValue) {
					// 内外部值不相等时，才尝试移动滑块
					if (newValue !== this.ee.pageBarName) {
						this.ee.setPageBarName(newValue )
					}
				}
			} 
		},
		methods:{ 
			onclick( name ){
				//触发点击单个tab的click 函数，用v-model:changeItem双向绑定
				 this.$emit("update:changeItem", name)
				 
			},
			onchange( name ){
				this.ee.setPageBarName(name )
			}
		}
	}
</script>

<style lang="scss" scoped>
 .tabicon{
	 width: 26px;
	 height: 26px;
 }
</style>